<template>
  <div v-if="show" class="image-preview">
    <span class="close-btn" @click="close">
      <i class="iconfont icon-quxiao"></i>
    </span>
    <div class="image-container">
      <img ref="image" :src="imageUrl" :style="{ transform: `scale(${zoomLevel})` }" alt="图片走丢了..."
        @wheel.prevent="zoomImage" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const props = defineProps({
  imageUrl: {
    type: String,
    default: "",
  },
  show: {
    type: Boolean,
    default: true,
  },
});

const zoomLevel = ref(1);
const minZoom = 0.5;
const maxZoom = 3;
const zoomImage = (event: WheelEvent) => {
  const zoomDelta = event.deltaY * -0.003;
  const newZoomLevel = zoomLevel.value + zoomDelta;
  zoomLevel.value = Math.min(Math.max(newZoomLevel, minZoom), maxZoom);
};
const emit = defineEmits(['close'])
const close = () => {
  // 在这里添加关闭预览的逻辑
  zoomLevel.value = 1;
  emit('close')
};
</script>

<style lang="scss" scoped>
.image-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: rgba(0, 0, 0, .7);
}

.image-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.image-container img {
  display: block;
  max-width: 80vw;
  max-height: 80vh;
  margin: 0 auto;
  cursor: zoom-in;
  transition: transform 0.2s linear;
}

.close-btn {
  position: absolute;
  top: 5%;
  right: 5%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #66656b;
  color: #ffffff;
  font-weight: bold;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1001;

  .icon-quxiao {
    font-size: 20px;
  }
}
</style>
